<template>
    <div>
       <div class="banner"> 
        <div class="wrapper"> 
            <img src="~/assets/img/page-banner.png" alt="" /> 
        </div> 
        </div> 
        <!--两列布局--> 
        <div class="wrapper tag-item"> 
        <div class="fl left-list"> 
            <p class="full-info">为了获取更好的体验 请 <a href="makeFriends-edit.html" target="_blank">完善兴趣信息</a><span class="sui-icon icon-tb-close close"></span></p> 
            <div class="friend-dating-list"> 
            <ul class="friends"> 
            <li class="friend-item"> 
            <div class="fl photo"> 
                <span class="cafe-more"></span> 
                <div class="img">
                <img src="~/assets/img/widget-dating1.png" alt="" />
                </div> 
                <div class="tag"> 
                <span class="tag-cafe cafe"><i class="fa fa-coffee" aria-hidden="true"></i> 喝咖啡</span> 
                </div> 
            </div> 
            <div class="fl content"> 
                <p class="title"> <span class="name">全栈大牛</span> 邀你一起 <span class="cafe">喝咖啡</span> <b class="bold">匹配度 96%</b> </p> 
                <p class="aa"> <span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span> </p> 
                <p class="point"> 他刚刚分享了XXX文章</p> 
                <p class="desc"> 推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p> 
            </div> 
            <div class="fr xy"> 
                <ul> 
                <li><i class="like sui-icon icon-tb-like"></i></li> 
                <li><i class="close sui-icon icon-tb-roundclose"></i></li> 
                <li><i class="message sui-icon icon-tb-comment"></i></li> 
                </ul> 
            </div> 
            <div class="clearfix"></div> </li> 
            <li class="friend-item"> 
            <div class="fl photo"> 
                <span class="eat-more"></span> 
                <div class="img">
                <img src="~/assets/img/widget-dating2.png" alt="" />
                </div> 
                <div class="tag"> 
                <span class="tag-cafe eat"><i class="fa fa-cutlery" aria-hidden="true"></i> 吃饭</span> 
                </div> 
            </div> 
            <div class="fl content"> 
                <p class="title"> <span class="name">全栈大牛</span> 邀你一起 <span class="eat">吃饭</span> <b class="bold">匹配度 96%</b> </p> 
                <p class="aa"> <span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span> </p> 
                <p class="point">他刚刚分享了XXX文章</p> 
                <p class="desc">推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p> 
            </div> 
            <div class="fr xy"> 
                <ul> 
                <li><i class="like sui-icon icon-tb-like"></i></li> 
                <li><i class="close sui-icon icon-tb-roundclose"></i></li> 
                <li><i class="message sui-icon icon-tb-comment"></i></li> 
                </ul> 
            </div> 
            <div class="clearfix"></div> </li> 
            <li class="friend-item"> 
            <div class="fl photo"> 
                <span class="travel-more"></span> 
                <div class="img">
                <img src="~/assets/img/widget-dating3.png" alt="" />
                </div> 
                <div class="tag"> 
                <span class="tag-cafe travel"><img src="~/assets/img/widget-fa-travel.png" alt="" /> 旅行</span> 
                </div> 
            </div> 
            <div class="fl content"> 
                <p class="title"><span class="name">全栈大牛</span> 邀你一起 <span class="travel">旅行</span><b class="bold">匹配度 96%</b></p> 
                <p class="aa"> <span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span> </p> 
                <p class="point">他刚刚分享了XXX文章</p> 
                <p class="desc">推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p> 
            </div> 
            <div class="fr xy"> 
                <ul> 
                <li><i class="like sui-icon icon-tb-like"></i></li> 
                <li><i class="close sui-icon icon-tb-roundclose"></i></li> 
                <li><i class="message sui-icon icon-tb-comment"></i></li> 
                </ul> 
            </div> 
            <div class="clearfix"></div> </li> 
            <li class="friend-item"> 
            <div class="fl photo"> 
                <span class="sing-more"></span> 
                <div class="img">
                <img src="~/assets/img/widget-dating3.png" alt="" />
                </div> 
                <div class="tag"> 
                <span class="tag-cafe sing"><img src="~/assets/img/widget-fa-sing.png" alt="" /> K歌</span> 
                </div> 
            </div> 
            <div class="fl content"> 
                <p class="title"><span class="name">全栈大牛</span> 邀你一起<span class="sing">K歌</span><b class="bold">匹配度 96%</b></p> 
                <p class="aa"> <span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span> </p> 
                <p class="point">他刚刚分享了XXX文章</p> 
                <p class="desc">推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p> 
            </div> 
            <div class="fr xy"> 
                <ul> 
                <li><i class="like sui-icon icon-tb-like"></i></li> 
                <li><i class="close sui-icon icon-tb-roundclose"></i></li> 
                <li><i class="message sui-icon icon-tb-comment"></i></li> 
                </ul> 
            </div> 
            <div class="clearfix"></div> </li> 
            <li class="friend-item"> 
            <div class="fl photo"> 
                <span class="movie-more"></span> 
                <div class="img">
                <img src="~/assets/img/widget-dating4.png" alt="" />
                </div> 
                <div class="tag"> 
                <span class="tag-cafe movie"><img src="~/assets/img/widget-fa-movie.png" alt="" /> 看电影</span> 
                </div> 
            </div> 
            <div class="fl content"> 
                <p class="title"><span class="name">全栈大牛</span> 邀你一起<span class="movie">看电影</span><b class="bold">匹配度 96%</b></p> 
                <p class="aa"> <span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span> </p> 
                <p class="point">他刚刚分享了XXX文章</p> 
                <p class="desc">推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p> 
            </div> 
            <div class="fr xy"> 
                <ul> 
                <li><i class="like sui-icon icon-tb-like"></i></li> 
                <li><i class="close sui-icon icon-tb-roundclose"></i></li> 
                <li><i class="message sui-icon icon-tb-comment"></i></li> 
                </ul> 
            </div> 
            <div class="clearfix"></div> </li> 
            <li class="friend-item"> 
            <div class="fl photo"> 
                <span class="other-more"></span> 
                <div class="img">
                <img src="~/assets/img/widget-dating5.png" alt="" />
                </div> 
                <div class="tag"> 
                <span class="tag-cafe other"><img src="~/assets/img/widget-fa-other.png" alt="" /> 其他</span> 
                </div> 
            </div> 
            <div class="fl content"> 
                <p class="title"><span class="name">全栈大牛</span> 邀你一起 <span class="other">其他</span><b class="bold">匹配度 96%</b></p> 
                <p class="aa"> <span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span> </p> 
                <p class="point">他刚刚分享了XXX文章</p> 
                <p class="desc">推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p> 
            </div> 
            <div class="fr xy"> 
                <ul> 
                <li><i class="like sui-icon icon-tb-like"></i></li> 
                <li><i class="close sui-icon icon-tb-roundclose"></i></li> 
                <li><i class="message sui-icon icon-tb-comment"></i></li> 
                </ul> 
            </div> 
            <div class="clearfix"></div> </li> 
            </ul>      
            </div> 
        </div> 
        <div class="fl right-tag"> 
            <div class="friend-info-card"> 
            <div class="card"> 
            <div class="photo-name"> 
            <img src="~/assets/img/widget-photo.png" alt="" /> 
            <div class="name-edit"> 
                <p><span class="name">用户名</span> <span class="edit">编辑兴趣资料</span></p> 
                <p>认证</p> 
            </div> 
            <div class="clearfix"></div> 
            </div> 
            <div class="like"> 
            <span class="like1">喜欢　<i class="num">400</i></span> 
            <span>被喜欢　<i class="num">5</i></span> 
            </div> 
            </div> 
            </div> 
            <div class="block-btn"> 
            <p>约一约有趣的人，会一会好的时光！</p> 
            <a class="sui-btn btn-block btn-share" href="~/assets/makeFriends-submit.html" target="_blank">发布约会</a> 
            </div> 
            <div class="rank"> 
            <div class="head"> 
            <h3 class="title">排行榜</h3> 
            </div> 
            <div class="rank-list"> 
            <ul class="rank"> 
            <li> <span class="fl dating">喝咖啡</span> <span class="fr cafe">102258</span> </li> 
            <li> <span class="fl dating">吃饭</span> <span class="fr eat">9878</span> </li> 
            <li> <span class="fl dating">看电影</span> <span class="fr movie">2564</span> </li> 
            <li> <span class="fl dating">旅行</span> <span class="fr travel">897</span> </li> 
            </ul> 
            </div> 
            </div> 
            <div class="friend-line-card"> 
            <div class="card"> 
            <p>找个合适的参加一场线下活动</p> 
            </div> 
            </div> 
            <div class="friend-line-card"> 
            <div class="card"> 
            <p>找个合适的参加一场线下活动</p> 
            </div> 
            </div> 
        </div> 
        <div class="clearfix"></div> 
        </div> 


    </div>
</template>
<script>
import '~/assets/css/page-sj-makeFriends-index.css'
export default {
    
}
</script>
